<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { ref } from 'vue'
import loading from "@/components/loading5/index.vue";


const isShowLoading = ref(false)

const onShowLoadingClick = () => {
  isShowLoading.value = true
  setTimeout(() => {
    isShowLoading.value=false
  }, 2000);
}
</script>

<template>
  <!-- <Counter msg="Hello Vue 3 + TypeScript + Vite" /> -->
  <div class="typing">
    <div class="typing-effect">
      欢迎来到我的首页！
    </div>
    <div class="text-2xl text-red-200">
      今天星期几
    </div>
    <el-button type="primary" @click="onShowLoadingClick">确定</el-button>
  </div>
  <loading :show="isShowLoading"></loading>
</template>

<style scoped>
.typing {
  /* height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center; */
}

.typing-effect {
  width: 15ch;
  animation: typing 2s steps(9), effect .5s step-end alternate;
  animation-iteration-count: infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0
  }
}
</style>
